<template>
  <div class="search-box">
    <div class="top">
      <div class="left">
        <el-icon><Search /></el-icon>
        <span>筛选搜索</span>
      </div>
      <div class="right">
        <el-button>重置</el-button>
        <el-button type="primary" @click="searchChange">查询搜索</el-button>
      </div>
    </div>
    <div class="bottom">
      <span>商品名称: </span>
      <input v-model="form.keyword" type="text" placeholder="请输入商品名称" />
    </div>
  </div>
  <el-table :data="list" border>
    <el-table-column prop="id" label="编号" />
    <el-table-column prop="pic" label="商品图片">
      <template #default="row">
        <el-image :src="row.pic" fit="contain" />
      </template> </el-table-column
    >>
    <el-table-column prop="name" label="商品名称" />
    <el-table-column prop="price" label="价格/货号" />
    <el-table-column prop="address" label="标签" />
    <el-table-column prop="zip" label="排序" />
    <el-table-column prop="zip" label="SKU库存" />
    <el-table-column prop="zip" label="销量" />
    <el-table-column prop="zip" label="审核状态" />
    <el-table-column label="操作">
      <template #default>
        <el-button link type="primary" size="small">编辑</el-button>
        <el-button link type="primary" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <ElConfigProvider :locale="zhCn">
    <el-pagination
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="pageNumChange"
      @current-change="pageSizeChange"
    />
  </ElConfigProvider>
</template>
<script setup lang="ts">
import useTable from "@/hooks/useTable";
import { productListAPI } from "./api";
import { Search } from "@element-plus/icons-vue";
import { ElConfigProvider } from "element-plus";
//语言国际化
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { reactive } from "vue";

const form = reactive({
  keyword: "",
});

const {
  list,
  total,
  pageNum,
  pageSize,
  pageNumChange,
  pageSizeChange,
  searchChange,
} = useTable(productListAPI, form);
</script>
<style lang="less" scoped>
//表格
:deep(.cell) {
  text-align: center;
}
//搜索
.search-box {
  box-shadow: 0 0 2px 2px #ccc;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  font-size: 14px;
  box-sizing: border-box;
  height: 132px;
  .top {
    padding: 10px 0 0 0;
    display: flex;
    justify-content: space-between;
    span {
      margin-left: 10px;
      color: #303133;
    }
  }
  .bottom {
    display: flex;
    padding: 10px 40px 30px 40px;
    height: 32px;
    line-height: 32px;
    color: #606266;

    input {
      margin-left: 12px;
      width: 200px;
      background-color: #fff;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      box-sizing: border-box;
      color: #606266;
      padding: 0 15px;
    }
  }
}
</style>
